<template>
  <div style="padding: 16px">
    <div style="border: 1px solid #e5e7eb; padding: 20px; background-color: #fff">
      <el-descriptions :column="1" :border="true">
        <el-descriptions-item label="部门编号">{{ data.desData.number }}</el-descriptions-item>
        <el-descriptions-item label="申请部门">{{ data.desData.deptName }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ data.desData.userName }}</el-descriptions-item>
        <el-descriptions-item label="申购原因">{{ data.desData.reason }}</el-descriptions-item>
        <el-descriptions-item label="办公地点">{{ data.desData.place }}</el-descriptions-item>
      </el-descriptions>
      <template v-if="data.desData.list">
        <el-table :data="data.desData.list" style="width: 100%">
          <el-table-column prop="officeListName" label="物品名称" />
          <el-table-column prop="listNumber" label="数量" />
          <el-table-column prop="price" label="单位" />
          <el-table-column prop="unit" label="单价" />
          <el-table-column prop="allPrice" label="总价" />
          <el-table-column prop="purchaseDate" label="日期">
            <template #default="scope">
             <span>{{scope.row.purchaseDate ? moment(scope.row.purchaseDate*1000).format('YYYY-MM-DD') : '-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="备注" />
          <el-table-column prop="url" label="附件">
            <template #default="scope">
              <el-image style="width: 80px; height: 80px" :src="scope.row.url" v-if="scope.row.url"/>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { useRender } from '/@/components/Table';
import { officeInfo } from '/@/api/backs/workFlow/operation';
import { propTypes } from '/@/utils/propTypes';
import { useRoute } from 'vue-router';
import moment from 'moment';
const props = defineProps({
  id: propTypes.number.def(undefined),
});
const data = reactive({
  desData: {},
});
const { params } = useRoute();
console.log(props.id);
console.log(params.id);
officeInfo({ id: props.id || params.id }).then((res) => {
  console.log(res);
  data.desData = res;
});
</script>
